<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档管理 - OA办公系统</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body class="bg-gray-50 h-screen overflow-auto p-6">
    <div class="container mx-auto fade-in">
        <!-- 页面标题 -->
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-bold text-gray-800">文档管理</h1>
            <div class="flex space-x-2">
                <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center">
                    <i class="fas fa-upload mr-2"></i>
                    <span>上传文档</span>
                </button>
                <button class="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 flex items-center">
                    <i class="fas fa-folder-plus mr-2"></i>
                    <span>新建文件夹</span>
                </button>
                <div class="relative">
                    <input type="text" placeholder="搜索文档" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
                </div>
            </div>
        </div>

        <!-- 文档分类标签 -->
        <div class="bg-white rounded-lg shadow mb-6">
            <div class="flex border-b overflow-x-auto">
                <button class="px-6 py-3 text-blue-500 border-b-2 border-blue-500 font-medium">全部文档</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">我的文档</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">共享文档</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">部门文档</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">收藏文档</button>
                <button class="px-6 py-3 text-gray-500 hover:text-blue-500">回收站</button>
            </div>
        </div>

        <!-- 文件导航和筛选 -->
        <div class="bg-white rounded-lg shadow p-4 mb-6">
            <div class="flex flex-wrap items-center justify-between">
                <div class="flex items-center space-x-2">
                    <a href="#" class="text-gray-500 hover:text-blue-500">首页</a>
                    <i class="fas fa-chevron-right text-xs text-gray-400"></i>
                    <a href="#" class="text-gray-500 hover:text-blue-500">文档中心</a>
                    <i class="fas fa-chevron-right text-xs text-gray-400"></i>
                    <span class="text-blue-500">市场部</span>
                </div>
                <div class="flex items-center space-x-4">
                    <div class="flex items-center">
                        <span class="text-gray-500 mr-2">排序:</span>
                        <select class="border border-gray-300 rounded px-3 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option>最近修改</option>
                            <option>名称</option>
                            <option>大小</option>
                            <option>类型</option>
                        </select>
                    </div>
                    <div class="flex space-x-2">
                        <button class="p-2 bg-gray-100 text-gray-600 rounded hover:bg-gray-200">
                            <i class="fas fa-th-large"></i>
                        </button>
                        <button class="p-2 bg-blue-100 text-blue-600 rounded hover:bg-blue-200">
                            <i class="fas fa-list"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 文件夹列表 -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
            <!-- 文件夹1 -->
            <div class="bg-white rounded-lg shadow hover:shadow-md transition-shadow p-4 cursor-pointer">
                <div class="flex items-center mb-3">
                    <div class="h-10 w-10 bg-blue-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-folder text-blue-500 text-xl"></i>
                    </div>
                    <div class="flex-1 truncate">
                        <h3 class="font-medium text-gray-800 truncate">市场活动策划</h3>
                    </div>
                    <div class="dropdown relative">
                        <button class="p-1 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                    </div>
                </div>
                <div class="flex justify-between text-xs text-gray-500">
                    <span>12个文件</span>
                    <span>更新于 2023-06-15</span>
                </div>
            </div>

            <!-- 文件夹2 -->
            <div class="bg-white rounded-lg shadow hover:shadow-md transition-shadow p-4 cursor-pointer">
                <div class="flex items-center mb-3">
                    <div class="h-10 w-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-folder text-green-500 text-xl"></i>
                    </div>
                    <div class="flex-1 truncate">
                        <h3 class="font-medium text-gray-800 truncate">产品资料</h3>
                    </div>
                    <div class="dropdown relative">
                        <button class="p-1 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                    </div>
                </div>
                <div class="flex justify-between text-xs text-gray-500">
                    <span>8个文件</span>
                    <span>更新于 2023-06-10</span>
                </div>
            </div>

            <!-- 文件夹3 -->
            <div class="bg-white rounded-lg shadow hover:shadow-md transition-shadow p-4 cursor-pointer">
                <div class="flex items-center mb-3">
                    <div class="h-10 w-10 bg-purple-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-folder text-purple-500 text-xl"></i>
                    </div>
                    <div class="flex-1 truncate">
                        <h3 class="font-medium text-gray-800 truncate">客户资源</h3>
                    </div>
                    <div class="dropdown relative">
                        <button class="p-1 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                    </div>
                </div>
                <div class="flex justify-between text-xs text-gray-500">
                    <span>15个文件</span>
                    <span>更新于 2023-06-08</span>
                </div>
            </div>

            <!-- 文件夹4 -->
            <div class="bg-white rounded-lg shadow hover:shadow-md transition-shadow p-4 cursor-pointer">
                <div class="flex items-center mb-3">
                    <div class="h-10 w-10 bg-yellow-100 rounded-lg flex items-center justify-center mr-3">
                        <i class="fas fa-folder text-yellow-500 text-xl"></i>
                    </div>
                    <div class="flex-1 truncate">
                        <h3 class="font-medium text-gray-800 truncate">财务报表</h3>
                    </div>
                    <div class="dropdown relative">
                        <button class="p-1 text-gray-400 hover:text-gray-600 rounded-full hover:bg-gray-100">
                            <i class="fas fa-ellipsis-v"></i>
                        </button>
                    </div>
                </div>
                <div class="flex justify-between text-xs text-gray-500">
                    <span>6个文件</span>
                    <span>更新于 2023-06-05</span>
                </div>
            </div>
        </div>

        <!-- 文件列表 -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <table class="w-full enhanced-table">
                <thead>
                    <tr class="bg-gray-50 text-left">
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">文件名</th>
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">大小</th>
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">修改日期</th>
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">创建者</th>
                        <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    <!-- 文件1 -->
                    <tr class="hover:bg-blue-50">
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <div class="h-10 w-10 bg-red-100 rounded-lg flex items-center justify-center mr-3">
                                    <i class="fas fa-file-pdf text-red-500"></i>
                                </div>
                                <div>
                                    <div class="font-medium text-gray-900">2023年Q2季度市场分析报告.pdf</div>
                                    <div class="text-sm text-gray-500">PDF文档</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500">4.5 MB</td>
                        <td class="px-6 py-4 text-sm text-gray-500">2023-06-15 14:30</td>
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <img src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="用户头像" class="h-6 w-6 rounded-full mr-2">
                                <span class="text-sm text-gray-500">张经理</span>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-sm">
                            <div class="flex space-x-2">
                                <button class="px-2 py-1 bg-blue-100 text-blue-600 rounded hover:bg-blue-200">
                                    <i class="fas fa-download mr-1"></i>下载
                                </button>
                                <button class="px-2 py-1 bg-gray-100 text-gray-600 rounded hover:bg-gray-200">
                                    <i class="fas fa-share-alt mr-1"></i>分享
                                </button>
                                <button class="px-2 py-1 text-gray-500 hover:text-red-500">
                                    <i class="fas fa-trash-alt"></i>
                                </button>
                            </div>
                        </td>
                    </tr>
                    <!-- 文件2 -->
                    <tr class="hover:bg-blue-50">
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <div class="h-10 w-10 bg-green-100 rounded-lg flex items-center justify-center mr-3">
                                    <i class="fas fa-file-excel text-green-500"></i>
                                </div>
                                <div>
                                    <div class="font-medium text-gray-900">销售业绩统计表.xlsx</div>
                                    <div class="text-sm text-gray-500">Excel表格</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 text-sm text-gray-500">2.1 MB</td>
                        <td class="px-6 py-4 text-sm text-gray-500">2023-06-14 09:15</td>
                        <td class="px-6 py-4">
                            <div class="flex items-center">
                                <img src="https://images.unsplash.com/photo-1500648767791-00